<template>
  <div class="extension">
    <section class="extensionheader">
      <div class="headercon textcenter">
        <h2>{{$t('extends[0]')}}</h2>
        <h3>{{$t('extends[1]')}}</h3>
      </div>
    </section>
    <section class="shareheader">
      <ul class="cont">
        <li class="commission textcenter">
          <h2 class="h2">
            <p class="title">{{recommendsdata.total}}</p>
            <span class="text">{{$t('extends[2]')}}</span>
          </h2>
          <!-- <h2 class="h2">
            <p class="title">{{pageInfo.total_income}}</p>
            <span class="text">{{$t('pk[3]')}}{{$t('extends[3]')}}</span>
          </h2> -->
        </li>
        <li class="share">
          <h2 class="list">
            <img :src="registerLinkdata.qrcode" alt />
          </h2>
          <h2 class="list" style="width:30%">
            <p class="title">{{$t('extends[4]')}}</p>
            <span>{{$t('extends[5]')}}</span>
            <!-- <p class="click2 burt textcenter" @click="copy">保存专属海报</p> -->
          </h2>
          <h2 class="list" style="margin-left:20px">
            <p class="title">{{$t('extends[6]')}}</p>
            <span>{{registerLinkdata.account}}</span>
            <P class="click click2" @click="copy">{{$t('extends[7]')}}</P>
          </h2>
        </li>
      </ul>
    </section>
    <section class="mainheader">
      <ul class="cont textcenter">
        <li class="list" :class="{'avat': type==1}" @click="typehide('1')">{{$t('extends[8]')}}</li>
        <!-- <li class="list" :class="{'avat': type==2}" @click="typehide('2')">{{$t('extends[9]')}}</li> -->
      </ul>
    </section>

    <section class="Myfriends" v-if="type==1">
      <el-table :data="recommendsdata.data" style="width: 100%">
        <el-table-column prop="name" :label="$t('userCj[0]')" width="410" align="left"></el-table-column>
        <el-table-column prop="email" :label="$t('extends[10]')" width="410" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.phone">{{scope.row.phone}}</span>
            <span v-else>{{scope.row.email}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" :label="$t('extends[11]')" width="410" align="right"></el-table-column>
      </el-table>
      <PagesSize :content="recommendsdata" @func="getMsgFormSon"></PagesSize>
    </section>

    <!-- <section class="Commissiondetails" v-else>
      <el-table :data="commissionDetailsdata.data" style="width: 100%">
        <el-table-column prop="from_uid" :label="$t('userCj[0]')" width="410" align="left">
          <template slot-scope="scope">
            <span>{{scope.row.from.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="recommend_yongjin" :label="$t('extends[12]')" width="410" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.recommend_yongjin}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" :label="$t('extends[11]')" width="410" align="right"></el-table-column>
      </el-table>
      <PagesSize :content="commissionDetailsdata" @func="getMsgFormSon"></PagesSize>
    </section> -->
  </div>
</template>

<script>
import { registerLink, recommends, commissionDetails, commissionPage } from "@/api/extension";
import { Hidephone } from "@/libs/util";
import PagesSize from "_dom/paging";
export default {
  name: "extension",
  data() {
    return {
      pageInfo:{
        total_income: 0
      },
      registerLinkdata: "",
      recommendsdata: {
        data: []
      },
      commissionDetailsdata: {
        data: []
      },
      type: "1",
      changedata: {
        page: "1"
      }
    };
  },
  methods: {
    copy() {
      var Url2 = this.registerLinkdata.url;
      var oInput = document.createElement("input");
      oInput.value = Url2;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      oInput.className = "oInput";
      oInput.style.display = "none";
      this.$message.success(this.$t('fog[4]'));
    },
    getdata() {
      //推广链接
      registerLink()
        .then(res => {
           
            this.registerLinkdata = res;
            this.recommendsget();
            this.commissionDetailsget();
           
        }).catch(err => {

        })
        commissionPage().then(res =>{
          this.pageInfo = res
        })
    },
    recommendsget() {
      //我的客户
      recommends(this.changedata)
        .then(res => {
           
            for (
              let index = 0;
              index < res.data.length;
              index++
            ) {
              let element = res.data[index];
              if (element.phone) {
                res.data[index].phone = Hidephone(
                  res.data[index].phone
                );
              } else {
                res.data[index].email = Hidephone(
                  res.data[index].email
                );
              }
            }
            this.recommendsdata = res;
           
        })
        .catch(err => {});
    },
    commissionDetailsget() {
      //我的佣金
      commissionDetails(this.changedata)
        .then(res => {
           
            this.commissionDetailsdata = res;
          
        })
        .catch(err => {});
    },
    typehide(data) {
      this.type = data;
      this.changedata = {
        page: "1"
      };
      this.typget();
    },
    getMsgFormSon(datavue) {
      this.changedata = datavue;
      this.typget();
    },
    typget() {
      switch (this.type) {
        case "1":
          this.recommendsget();
          break;
        case "2":
          this.commissionDetailsget();
          break;
        default:
          break;
      }
    }
  },
  created() {
    this.getdata();
  },
  components: {
    PagesSize
  }
};
</script>

